<script setup lang="ts">

</script>

<template>

 <div class="container">
     <div class="deparment">
        <div class="deTitle">
            <span class="common">常见科室</span>
           <div class="totalAndIcon">
                <span class="total">全部</span>
                <svg t="1691408532083" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3992" width="16" height="16"><path d="M761.6 489.6l-432-435.2c-9.6-9.6-25.6-9.6-35.2 0-9.6 9.6-9.6 25.6 0 35.2l416 416-416 425.6c-9.6 9.6-9.6 25.6 0 35.2s25.6 9.6 35.2 0l432-441.6C771.2 515.2 771.2 499.2 761.6 489.6z" p-id="3993"></path></svg>
           </div> 
        </div>
        <ul>
            <li>神经内科</li>
            <li>消化内科 </li>
            <li>呼吸内科 </li>
            <li>内科</li>
            <li>神经外科</li>
            <li>妇科</li>
            <li>产科</li>
            <li>儿科</li>
        </ul>
     </div>

     <div class="notice">
        <div class="head">
            <svg t="1691409650719" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7767" width="32" height="32"><path d="M872.802928 755.99406 872.864326 755.99406 872.864326 755.624646Z" fill="#272536" p-id="7768"></path><path d="M744.055658 192.799074c-4.814656-2.889817-9.601682-5.251607-15.442714-5.251607-14.262842 0-25.758664 11.559267-25.758664 25.805736 0 10.285251 6.088672 18.519796 14.6957 23.195282 94.679359 55.247278 158.344355 157.787676 158.344355 275.30416 0 117.424386-63.605643 219.931015-158.159136 275.18034-8.29492 4.538363-15.442714 13.050224-15.442714 23.583115 0 14.261818 11.559267 25.820062 25.791409 25.820062 5.716188 0 10.252505-2.202155 15.22475-5.063319 109.871363-64.133669 183.764304-183.143157 183.764304-319.520197C927.074995 375.785665 853.495186 257.010515 744.055658 192.799074z" fill="#272536" p-id="7769"></path><path d="M773.946432 511.867994c0-79.96524-43.344181-149.739373-107.821681-187.289594-2.920516-1.52268-9.785877-4.520967-14.603603-4.520967-14.325263 0-25.914206 11.589966-25.914206 25.89988 0 9.616008 5.096065 18.176988 12.865006 22.666232 49.839105 28.307719 83.45983 81.829703 83.45983 143.244448 0 62.472843-34.801621 116.817566-86.070284 144.750755-7.457856 4.538363-12.397355 12.803607-12.397355 22.188348 0 14.325263 11.588943 25.943882 25.882484 25.943882 6.090718 0.031722 13.33061-3.542686 13.33061-3.542686C729.048873 664.171772 773.946432 593.294514 773.946432 511.867994z" fill="#272536" p-id="7770"></path><path d="M541.3694 124.672464c-10.846022-5.219885-23.740704-3.790326-33.215496 3.712555-0.435928 0.358157-46.423309 36.914748-97.195669 74.296123-88.308255 65.081251-114.036219 75.925227-119.257128 77.649498l-110.6194 0c-0.63752 0-1.243317 0.062422-1.879813 0.093121l-56.504922 0c-14.231119 0-25.775037 11.543917-25.775037 25.775037l0 411.697573c0 14.261818 11.512195 25.761734 25.775037 25.761734l189.511191 0.027629c5.096065 1.865487 29.395494 13.0799 107.761306 76.999698 45.613874 37.162388 86.505189 73.485665 86.940095 73.829496 5.841032 5.218862 13.298887 7.92039 20.820188 7.92039 4.349051 0 8.729825-0.930185 12.862959-2.764973 11.277858-5.064342 18.517749-16.252149 18.517749-28.619828 0 0 0.031722-97.257068 0.031722-132.212184 0.808412-2.484587 1.213641-5.127787 1.213641-7.863085 0-2.792603-1.245364-578.026786-1.245364-578.026786C559.110459 140.892891 552.214399 129.924071 541.3694 124.672464zM508.308423 726.470653c0 1.494027-0.467651 94.617961-0.467651 94.617961-13.889335-11.745509-29.332049-24.64019-45.240367-37.507242-104.59008-84.702124-130.505309-91.816149-148.030451-91.816149-0.372483 0-0.683569 0.091074-1.025353 0.091074s-0.652869-0.091074-1.025353-0.091074L170.394297 691.765223c-18.037818 0-22.248723-5.128811-22.248723-23.246447L148.145573 352.559685c0-12.32163 1.461281-20.057825 16.298198-20.057825l128.065747 0c17.090237 0 43.315528-6.991228 157.787676-90.839915 20.383236-14.914688 40.330544-29.938869 57.544601-43.113937 0 0 0.373507 445.207781 0.467651 521.368368C507.779374 722.028481 508.308423 724.234729 508.308423 726.470653z" fill="#272536" p-id="7771"></path></svg>
            <span class="sysNotice">平台公告</span>
            <div class="totalAndIcon">
                 <span class="total">全部</span>
                 <svg t="1691408532083" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3992" width="16" height="16"><path d="M761.6 489.6l-432-435.2c-9.6-9.6-25.6-9.6-35.2 0-9.6 9.6-9.6 25.6 0 35.2l416 416-416 425.6c-9.6 9.6-9.6 25.6 0 35.2s25.6 9.6 35.2 0l432-441.6C771.2 515.2 771.2 499.2 761.6 489.6z" p-id="3993"></path></svg>
            </div>
        </div>
        <ul>
            <li>关于延长北京大学国际医院放假的通知 </li>
            <li>北京中医药大学东方医院部分科室医生门诊医 </li>
            <li>武警总医院号源暂停更新通知</li>
        </ul>
     </div>

     <div class="stop">
        <div class="head">
            <svg t="1691412159671" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9739" width="32" height="32"><path d="M842.666667 981.333333H181.333333a53.393333 53.393333 0 0 1-53.333333-53.333333V96a53.393333 53.393333 0 0 1 53.333333-53.333333h466.746667a52.986667 52.986667 0 0 1 37.713333 15.62l194.586667 194.586666a52.986667 52.986667 0 0 1 15.62 37.713334V928a53.393333 53.393333 0 0 1-53.333333 53.333333zM181.333333 85.333333a10.666667 10.666667 0 0 0-10.666666 10.666667v832a10.666667 10.666667 0 0 0 10.666666 10.666667h661.333334a10.666667 10.666667 0 0 0 10.666666-10.666667V298.666667h-160a53.393333 53.393333 0 0 1-53.333333-53.333334V85.333333z m501.333334 30.166667V245.333333a10.666667 10.666667 0 0 0 10.666666 10.666667h129.833334z m21.333333 652.5H320a21.333333 21.333333 0 0 1 0-42.666667h384a21.333333 21.333333 0 0 1 0 42.666667z m0-213.333333H320a21.333333 21.333333 0 0 1 0-42.666667h384a21.333333 21.333333 0 0 1 0 42.666667zM490.666667 298.666667H320a21.333333 21.333333 0 0 1 0-42.666667h170.666667a21.333333 21.333333 0 0 1 0 42.666667z" fill="#5C5C66" p-id="9740"></path></svg>
            <span class="sysNotice">停诊公告</span>
            <div class="totalAndIcon">
                 <span class="total">全部</span>
                 <svg t="1691408532083" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3992" width="16" height="16"><path d="M761.6 489.6l-432-435.2c-9.6-9.6-25.6-9.6-35.2 0-9.6 9.6-9.6 25.6 0 35.2l416 416-416 425.6c-9.6 9.6-9.6 25.6 0 35.2s25.6 9.6 35.2 0l432-441.6C771.2 515.2 771.2 499.2 761.6 489.6z" p-id="3993"></path></svg>
            </div>
        </div>
        <ul>
            <li>中国人民解放军总医院第六医学中心(原海军总医院)呼吸内科门诊停诊公告</li>
            <li>首都医科大学附属北京潞河医院老年医学科门诊停诊公告</li>
            <li>中日友好医院中西医结合心内科门诊停诊公告</li>
        </ul>
     </div>

</div>

</template>

<style scoped lang="scss">
$font1:14px;
$font2:16px;
$color1:#333;
$color2:#999;
.container{
    width: 200px;
    height: 529px;
    .deparment{
        width: 200px;
        height: 165px;
        .deTitle{
            width: 200px;
            height: 21px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
            .common{
                font-size: $font2;
                color: $color1;
            }
            .totalAndIcon{
                display: flex;
                .total{
                    font-size: $font1;
                    color: $color2;
                }
            }
        }

        ul{
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            align-items: center;
            margin-left: -15px;
            li{
                width: 70px;
                height: 31px;
                font-size: $font1;
                color: $color1;
                margin: 0 0 0 30px;
                line-height: 31px;

            }
            li:hover{
                color: #55a6fe;
                cursor: pointer;
            }
        }

    }

    .notice{
        margin-top: 50px;
        width: 174px;
        height: 142px;
        .head{
            width: 200px;
            height: 40px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            line-height: 40px;
            .sysNotice{
                color: $color1;
                font-size: $font2;
            }
            .totalAndIcon{
                display: flex;
                align-items: center;
                .total{
                    font-size: $font1;
                    color: $color2;
                }
            }
        }

        ul{
            width: 174px;
            height: 85px;          
            li{
                margin-top: 10px;
                margin-left: 7px;
                width: 163px;
                height: 20px;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                font-size: $font1;
                color: $color1;
            }
            li:hover{
                color: #55a6fe;
                cursor: pointer;

            }
        }
    }

    .stop{
        margin-top: 50px;
        width: 174px;
        height: 142px;
        .head{
            width: 200px;
            height: 40px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            line-height: 40px;
            .sysNotice{
                color: $color1;
                font-size: $font2;
            }
            .totalAndIcon{
                display: flex;
                align-items: center;
                .total{
                    font-size: $font1;
                    color: $color2;
                }
            }
        }

        ul{
            width: 174px;
            height: 85px;          
            li{
                margin-top: 10px;
                margin-left: 7px;
                width: 163px;
                height: 20px;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                font-size: $font1;
                color: $color1;
            }
            li:hover{
                color: #55a6fe;
                cursor: pointer;

            }
        }
    }
}
</style>
